<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
      <title>Location History Browser</title>

    <style type="text/css">
      html, body {
      font-family: Arial,Sans-serif; font-size: 14px;
      left:0px;
      }

      #map {
      height: 700px;
      width: 700px;
      top: 0px;
      left: 0px;
      z-index: 0;
      margin-top: 0px;
      margin-left: 0px;
      margin-bottom: 0px;
      margin-right: 0px;
      padding-top: 0px;
      padding-left: 0px;
      padding-bottom: 0px;
      padding-right: 0px;
      }

      #mapscreen {
      margin-top: 0px;
      margin-left: 0px;
      margin-bottom: 0px;
      margin-right: 0px;
      padding-top: 0px;
      padding-left: 0px;
      padding-bottom: 0px;
      padding-right: 0px;
      }

      #surface {
      z-index: 2;
      position:absolute;
      left:0px;
      top:0px;
      margin-top: 0px;
      margin-left: 0px;
      margin-bottom: 0px;
      margin-right: 0px;
      padding-top: 0px;
      padding-left: 0px;
      padding-bottom: 0px;
      padding-right: 0px;
      }

      #topControls, #bottomControls {
      width: 100%;
      z-index: 3;
      position:absolute;
      left:0px;
      overflow:visible;
      }

      #topControls {
      top:0px;
      }

      #bottomControls {
      bottom:0px;
      }

      .buttonsPanel {
      background-color:#0E3267;
      font-weight:bold;
      font-size: 10.5px;
      opacity: 0.5;
      z-index: 3;
      }

      .button, .buttonOn, .buttonDisabled {
      border: 1px solid black;
      color: #FFFFFF;
      z-index: 5;
      padding: 10px;
      text-align:center;
      text-decoration: none;
      display:block;
      }

      .buttonOn {
      color: red;
      }

      .buttonDisabled {
      color: gray;
      opacity:0.5;
      }

      #floor {
      z-index: 5;
      position:absolute;
      /* SCREEN_WIDTH / 2 - 320 / 2 - 3 */
      left: 207px;
      /* SCREEN_HEIGHT / 2 - 480 / 2 - 3 */
      top: 177px;
/*      left: 347px;
      top: 327px; */
      }

      #zoomInButton, #zoomOutButton {
      font-size: 25px;
      padding-top:5px;
      padding-bottom:5px;
      }

      #hereButton {
      font-size: 25px;
      padding-top:5px;
      padding-bottom:5px;
      }

    </style>

  <body bgcolor="black" text="white">
    <div id="json"></div>
    <div id="mapscreen">
<!--      <div id="floor">
	<select id='fselect' onChange='window.mainview.setFloor_(this.options[this.selectedIndex].value); window.webview.floorChanged()'><option value='30'>30F</option><option value='29'>29F</option><option value='28'>28F</option><option value='27'>27F</option><option value='26'>26F</option><option value='25'>25F</option><option value='24'>24F</option><option value='23'>23F</option><option value='22'>22F</option><option value='21'>21F</option><option value='20'>20F</option><option value='19'>19F</option><option value='18'>18F</option><option value='17'>17F</option><option value='16'>16F</option><option value='15'>15F</option><option value='14'>14F</option><option value='13'>13F</option><option value='12'>12F</option><option value='11'>11F</option><option value='10'>10F</option><option value='9'>9F</option><option value='8'>8F</option><option value='7'>7F</option><option value='6'>6F</option><option value='5'>5F</option><option value='4'>4F</option><option value='3'>3F</option><option value='2'>2F</option><option value='1'>1F</option><option value='0' selected>Outdoor</option><option value='-1'>B1F</option><option value='-2'>B2F</option><option value='-3'>B3F</option></select>
      </div> -->
      <div id="surface">
	<div id="map"><div style="position:absolute; top:320px; left: 300px; font-size: 18px;">Loading...</div></div>
      </div>
    </div>
  </body>
    <script src="maps.js" type="text/javascript"></script>
    <script type="text/javascript">
      function trailSetup() {
      var d = new Date();
      // (d.getMonth() + 1) ... is this right?
      changeDate("" + (1900 + d.getYear()) + "/" + (d.getMonth() + 1) + "/" + d.getDate());
      }
    </script>
    <script src="http://www.google.com/jsapi?key=" type="text/javascript"></script>
    <script type="text/javascript">
      function message(mes) {
      $("mes").innerHTML = mes;
      }
      google.load("maps", "2");
      // google.setOnLoadCallback(start);
    </script>

</html>
